<template>
  <div class="list clearFix">
    <!-- 头部标题 -->
    <van-nav-bar title="商品列表"></van-nav-bar>

    <!-- 侧边导航栏 -->
    <van-sidebar v-model="activeKey">
      <van-sidebar-item
        @click="sidebarClick(item.id)"
        v-for="item of filterList(categoryList)"
        :title="item.mallCateforyName"
        :key="item.id"
      />
    </van-sidebar>

    <!-- 顶部标签栏 -->

    <swiper class="swiper" :options="swiperOption">
      <swiper-slide class="swiperList" v-for="(item,idx) of categorySubList" :key="item.id">
        <p @click="topBarClick(item.id,idx)" :class="idx===topbarCurrent ? 'active':null">{{item.mallSubName}}</p>
      </swiper-slide>
    </swiper>
    <!-- 商品内容 -->
    <div class="container clearFix">
      <van-grid direction="horizontal" :column-num="2" v-for="item of categorySub" :key="item.id">
        <van-grid-item icon="photo-o" text>
          <router-link :to="{path:'/details',query:{id:item.id}}">
            <van-image :src="item.pictureComperssPath" lazy-load />
          </router-link>
        </van-grid-item>

        <van-grid-item class="Price" icon="photo-o" text>
          <slot>
            <router-link :to="{path:'/details',query:{id:item.id}}">
              <p style="word-wrap:break-word">{{item.name}}元</p>
              <p class="p1">现价：{{item.presentPrice | toFixed | rmb}}元</p>
              <s>原价：{{item.oriPrice | toFixed | rmb}}</s>
            </router-link>
          </slot>
        </van-grid-item>
      </van-grid>
    </div>
    
    <!-- 底部标签栏 -->
    <tab-bar></tab-bar>
  </div>
</template>

<script>
import * as api from "@/request/api/list.js";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
  data() {
    return {
      categoryList: [],
      categorySubList: [],
      categorySub: [],
      activeKey: 0,
      topbarCurrent:0,
      swiperOption: {
        slidesPerView: 4,
        spaceBetween: 0
        // pagination: {
        //   el: ".swiper-pagination",
        //   clickable: true
        // }
      }
    };
  },
  components: {
    Swiper,
    SwiperSlide
  },
  methods: {
    //过滤侧导航数据
    filterList(arr) {
      return arr.filter((item, idx) => {
        return idx < 5;
      });
    },

    async API_getCategoryList() {
      //读取大类数据接口
      return await api.getCategoryList();
    },

    async API_getCategorySubList(categoryId) {
      //读取小类数据接口
      return await api.getCategorySubList({
        categoryId: categoryId
      });
    },

    async API_getGoodsListByCategorySubID(categorySubId) {
      //根据类别获取商品列表
      return await api.getGoodsListByCategorySubID({
        categorySubId: categorySubId
      });
    },

    async sidebarClick(id) {
      //  点击侧导航切换顶部导航数据
      let res2 = await this.API_getCategorySubList(id);
      this.categorySubList = res2.data.data;

      let res3 = await this.API_getGoodsListByCategorySubID(
        res2.data.data[0].id
      );
      this.categorySub = res3.data.data;

      
    },

    async topBarClick(id,idx=0) {
      //  点击顶部导航切换顶部导航数据
      let res3 = await this.API_getGoodsListByCategorySubID(id);
      this.categorySub = res3.data.data;

      this.topbarCurrent=idx

    }
  },
  async created() {
    let res = await this.API_getCategoryList();

    let res2 = await this.API_getCategorySubList(res.data.data[0].id);

    let res3 = await this.API_getGoodsListByCategorySubID(res2.data.data[0].id);
  // console.log(res3)
    this.categoryList = res.data.data;
    this.categorySubList = res2.data.data;
    this.categorySub = res3.data.data;
  }
};
</script>

<style lang="scss">
@import "@/style/list/list.scss";
</style>